import React, { useEffect, useRef } from "react"
import { useNavigate } from "react-router-dom"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { SelectedPage } from "../../shared/types"
import lcwImage from "../../assets/image/lcw.png"
import badmintImage from "../../assets/image/badminton.png"
import basketballImage from "../../assets/image/basketball.png"
import valleyballImage from "../../assets/image/valleyball.png"

// 注册ScrollTrigger插件
gsap.registerPlugin(ScrollTrigger)

type Props = {
  setSelectedPage: (value: SelectedPage) => void
}

const VenueSection: React.FC<Props> = ({ setSelectedPage }) => {
  const navigate = useNavigate()
  const sectionRef = useRef<HTMLElement>(null)
  const leftImageRef = useRef<HTMLDivElement>(null)
  const cardsRef = useRef<HTMLDivElement>(null)
  const card1Ref = useRef<HTMLDivElement>(null)
  const card2Ref = useRef<HTMLDivElement>(null)
  const card3Ref = useRef<HTMLDivElement>(null)

  // 场地数据
  const venues = [
    {
      id: 1,
      name: "羽毛球场",
      description: "专业羽毛球场，配备标准场地和优质设备，适合日常训练和比赛使用。",
      image: badmintImage,
      ref: card1Ref
    },
    {
      id: 2,
      name: "篮球场",
      description: "标准篮球场地，采用专业地板和篮筐设备，为篮球爱好者提供最佳运动体验。",
      image: basketballImage,
      ref: card2Ref
    },
    {
      id: 3,
      name: "排球场",
      description: "专业排球场，配备标准网高和场地尺寸，适合排球训练和比赛活动。",
      image: valleyballImage,
      ref: card3Ref
    }
  ]

  useEffect(() => {
    const ctx = gsap.context(() => {
      // 设置初始状态
      gsap.set([leftImageRef.current, card1Ref.current, card2Ref.current, card3Ref.current], {
        opacity: 0,
        y: 50
      })

      // 创建时间线
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top 80%",
          end: "bottom 20%",
          onEnter: () => setSelectedPage(SelectedPage.Venue),
          once: true
        }
      })

      // 添加动画序列
      tl.to(leftImageRef.current, {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: "power2.out"
      })
      .to(card1Ref.current, {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: "power2.out"
      }, "-=0.4")
      .to(card2Ref.current, {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: "power2.out"
      }, "-=0.4")
      .to(card3Ref.current, {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: "power2.out"
      }, "-=0.4")

    }, sectionRef)

    return () => ctx.revert()
  }, [setSelectedPage])

  // 处理卡片悬停效果
  const handleCardHover = (cardRef: React.RefObject<HTMLDivElement>, isEnter: boolean) => {
    const overlay = cardRef.current?.querySelector('.card-overlay') as HTMLElement
    const icon = cardRef.current?.querySelector('.card-icon') as HTMLElement
    
    if (overlay && icon) {
      if (isEnter) {
        gsap.to(overlay, {
          x: 0,
          duration: 0.6,
          ease: "power2.out"
        })
        gsap.to(icon, {
          scale: 1,
          rotation: 0,
          duration: 0.5,
          ease: "back.out(1.7)",
          delay: 0.2
        })
      } else {
        gsap.to(overlay, {
          x: "-100%",
          duration: 0.5,
          ease: "power2.in"
        })
        gsap.to(icon, {
          scale: 0,
          rotation: -180,
          duration: 0.3,
          ease: "power2.in"
        })
      }
    }
  }

  return (
    <section ref={sectionRef} id="venue" className="w-full min-h-screen bg-gray-50 py-20 px-4">
      <div className="max-w-7xl mx-auto">
        {/* 标题区域 */}
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-primary-500 mb-4">专业运动场地</h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            广东海洋大学体育馆提供多种专业运动场地，配备一流设施，为您的运动训练和比赛提供最佳环境。
          </p>
        </div>

        {/* 主要内容区域 */}
        <div className="flex flex-col lg:flex-row items-start gap-12">
          {/* 左侧图片 - 占1/3宽度 */}
          <div ref={leftImageRef} className="lg:w-1/3">
            <div className="relative">
              <img 
                src={lcwImage} 
                alt="体育馆场地" 
                className="w-full h-[600px] object-contain rounded-lg shadow-2xl bg-white"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent rounded-lg"></div>
            </div>
          </div>

          {/* 右侧卡片区域 - 占2/3宽度 */}
          <div ref={cardsRef} className="lg:w-2/3 space-y-6">
            {venues.map((venue: any) => (
              <div
                key={venue.id}
                ref={venue.ref}
                className="relative bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 cursor-pointer"
                onMouseEnter={() => handleCardHover(venue.ref, true)}
                onMouseLeave={() => handleCardHover(venue.ref, false)}
              >
                <div className="flex">
                  {/* 卡片左侧图片 */}
                  <div className="w-1/3 h-48 bg-gray-100 flex items-center justify-center">
                    <img 
                      src={venue.image} 
                      alt={venue.name}
                      className="w-full h-full object-contain p-2"
                    />
                  </div>
                  
                  {/* 卡片右侧内容 */}
                  <div className="w-2/3 p-6 flex flex-col justify-center">
                    <h3 className="text-xl font-bold text-primary-500 mb-3">{venue.name}</h3>
                    <p className="text-gray-600 leading-relaxed">{venue.description}</p>
                  </div>
                </div>

                {/* 悬停浮层 */}
                <div className="card-overlay absolute inset-0 bg-primary-500/30 flex items-center justify-end pr-6 transform -translate-x-full">
                  <div className="card-icon w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg scale-0">
                    <svg 
                      className="w-6 h-6 text-primary-500" 
                      fill="none" 
                      stroke="currentColor" 
                      viewBox="0 0 24 24"
                    >
                      <path 
                        strokeLinecap="round" 
                        strokeLinejoin="round" 
                        strokeWidth={2} 
                        d="M9 5l7 7-7 7" 
                      />
                    </svg>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 底部按钮 */}
        <div className="text-center mt-12">
          <button
            className="bg-primary-500 cursor-pointer text-white px-8 py-3 rounded-lg hover:bg-primary-600 transition-colors duration-300 font-semibold"
            onClick={() => navigate('/venues')}
          >
            查看所有场地
          </button>
        </div>
      </div>
    </section>
  )
}

export default VenueSection


